<template>
  <div ref="charts" class="charts" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/minxins/resize'
export default {
  name: 'PieChart',
  mixins: [resize],
  mounted() {
    const myEcharts = echarts.init(this.$refs.charts)
    myEcharts.setOption({
      title: {
        text: '家用电器',
        textStyle: {
          fontSize: 14
        },
        subtext: 312, // 副标题文本
        subtextStyle: {
          fontSize: 20
        },
        left: 'center',
        top: '44%'
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              name: '家用电器',
              value: 312
            },
            {
              name: '食用酒水',
              value: 336
            },
            {
              name: '个护健康',
              value: 342
            },
            {
              name: '服饰箱包',
              value: 41
            },
            {
              name: '母婴产品',
              value: 188
            },
            {
              name: '其他',
              value: 94
            }
          ],
          // 半径
          radius:['40%', '80%'],
          itemStyle:{
            borderWidth:2,
            borderColor:'#fff'
          },
          label:{// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            formatter:'{b}:{c}'
          }
        }
      ]
    })
    this.myEcharts = myEcharts
    myEcharts.on('mouseover', function(params) {
      const { name, value } = params.data

      myEcharts.setOption({
        title: {
          text: name,
          subtext: value
        }
      })
    })
  }
}
</script>

<style lang="sass" scoped>
.charts
  width: 100%
  height: 100%
</style>
